import {useNavigate} from "react-router-dom";
import {useEffect, useState} from "react";
import {UserAccount} from "../../model/UserAccount.ts";
import axios from "axios";
import {baseUrl} from "../../settings/Settings.ts";


const CartSidebar = () => {

    const navigate = useNavigate()

    const [account, setAccount] = useState<UserAccount>()

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(`${baseUrl}/api/account/info`, {
                    withCredentials: true, // send credentials with the request
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const data = response.data;
                if (response.status === 200) {
                    setAccount(data.account);

                }

            } catch (error) {
                console.error('Error fetching data');
            }
        };

        fetchData();
    }, []);


    const handleClick = () => {
        navigate("/login")
    }

    return (


        <div className="d-flex flex-column flex-shrink-0 p-3 sidebar" id="sidebar-summary">
            <strong id="text-items" className="h5 text-muted mt-1 mb-0">Order Summary</strong>
            <hr/>

            <div className="container m-0 p-0 container-cart-sidebar">
                <div className="row ms-2 me-2">
                    <div className="col-6">
                        <span className="text-body-secondary text-uppercase">Items</span>
                    </div>
                    <div className="col-6 text-end">
                        <span className="text-body-secondary text-uppercase" id="subtotalSidebar">0</span>
                    </div>
                </div>


                {/*{account && (*/}
                {/*    <div>*/}
                {/*        <div className="row mt-3">*/}
                {/*            <div className="col-12">*/}
                {/*                <span className="text-body-secondary text-uppercase">Shipping address</span>*/}
                {/*            </div>*/}
                {/*        </div>*/}
                {/*        <div className="row mt-3 me-2">*/}
                {/*            <select className="form-select" aria-label="Address">*/}
                {/*                <option selected value="1">{account.address1}</option>*/}
                {/*                <option value="2">{account.address2}</option>*/}
                {/*            </select>*/}
                {/*        </div>*/}
                {/*    </div>*/}
                {/*)}*/}


                <div className="flex-grow-1"/>

                {account ? (

                    <button
                        className="w-100 btn btn-primary btn-lg mt-5 mb-2 rounded-5 text-uppercase primary-button"
                        id="buttonSubmit"
                        type="submit"
                    >
                        Checkout
                    </button>
                ) : (
                    <>

                        <button
                            className="w-100 btn btn-primary btn-lg mt-5 mb-2 rounded-5 text-uppercase primary-button"
                            id="loginButton" onClick={handleClick}
                        >
                            Log in
                        </button>
                    </>) }


            </div>
        </div>
    )
}

export default CartSidebar